<template>
  <div class="reg-login-container">
    <div class="login-body">
      <div class="login-header">
        <div class="header-top">
          <div class="top-text">ABOUT DUAL BY FIT ISLAND·ORDER</div>
          <a @click="toIndex">Go Index</a>
        </div>
        <div class="header-bottom">
          <a id="mainlogo1" href="#"
            ><img src="../static/slider/LOGO.png" />
          </a>
          <div class="btm-text">ORDER PAYMENT</div>
        </div>
      </div>
      <div class="login-content">
        <div class="user-box">
          <div class="user-title">PLEASE CONFIRM PAYMENT INFORMATION</div>
          <div class="user-form">
            <div class="user-item">
              <div>Name:</div>
              <div>{{ userInfo.nickName }}</div>
            </div>
            <div class="user-item">
              <div>Gender:</div>
              <div>{{ userInfo.sex == 0 ? "Males" : "Female" }}</div>
            </div>
            <div class="user-item">
              <div>Mobile:</div>
              <div>{{ userInfo.phone || "-" }}</div>
            </div>
            <div class="user-item">
              <div>E-mail</div>
              <div>{{ userInfo.userMail }}</div>
            </div>
          </div>
        </div>
        <div class="price-box">
          <div class="price-list">
            <div class="price-info">
              <div class="price-name">{{ orderInfo.name }}</div>
              <div>
                <span>{{ orderInfo.meals }}</span
                >MEALS
              </div>
              <div>
                NETT PRING:<span>${{ orderInfo.nettPring }}</span>
              </div>
            </div>
            <div class="price-includes">INCLUDES:</div>
            <div class="includes-list">
              <div class="includes-item">
                <span class="item-num">1</span>
                <div class="item-title">
                  {{ orderInfo.orderFoodIncludesVoList.deliveries }} Deliveries
                </div>
              </div>
              <div class="includes-item">
                <span class="item-num">2</span>
                <div class="item-title">Personal Training</div>
                <div class="item-price">
                  ${{ orderInfo.orderFoodIncludesVoList.personalTrainingPrice }}
                </div>
                <div class="item-price-person">
                  <span
                    >${{
                      orderInfo.orderFoodIncludesVoList
                        .personalTrainingPreferentialPrice
                    }}</span
                  >/Lesson
                </div>
                <div
                  class="free"
                  v-if="orderInfo.orderFoodIncludesVoList.foodSession != 0"
                >
                  Free
                  {{ orderInfo.orderFoodIncludesVoList.foodSession }} Sessions
                </div>
              </div>
              <div class="includes-item">
                <span class="item-num">3</span>
                <div class="item-title">Group Class</div>
                <div class="item-price">
                  ${{ orderInfo.orderFoodIncludesVoList.groupClassPrice }}
                </div>
                <div class="item-price-person">
                  <span
                    >${{
                      orderInfo.orderFoodIncludesVoList
                        .groupClassPreferentialPrice
                    }}</span
                  >/Lesson
                </div>
                <div
                  class="free"
                  v-if="orderInfo.orderFoodIncludesVoList.foodLesson != 0"
                >
                  Free
                  {{ orderInfo.orderFoodIncludesVoList.foodLesson }} Lessons
                </div>
              </div>
            </div>
            <div class="price-tips">
              <div>
                <img src="../static/slider/flower2.png" alt="" />{{
                  orderInfo.introduce
                }}
              </div>
            </div>
          </div>
          <div class="re-btn">
            <div @click="Previous">PREVIOUS</div>
            <div @click="orderNow">ORDER NOW</div>
          </div>
        </div>
      </div>
      <div class="login-footer">
        <div class="foot-body">
          <a id="subLogo" href="#"><img src="../static/slider/LOGO.png" /> </a>
          <span class="foot-web"> 2024 @ DUAL BY FIT ISLAND</span>
          <span class="foot-link">
            : www.dual by fit island.sg .: contact . terms & condition . fag :
            private dinner</span
          >
        </div>
      </div>
    </div>
  </div>
</template>
    
    <script>
import { Message } from "element-ui";

export default {
  name: "Order",
  data() {
    return {
      userInfo: {},
      orderInfo: {},
    };
  },
  mounted() {
    this.orderInfo = JSON.parse(this.$route.params.orderInfo);
    this.getUserInfo();
  },
  methods: {
    Previous(){
      this.$router.push({
        name: "MenuPrice",
      });
    },
    toIndex() {
      this.$router.push({
        name: "Index",
      });
    },
    getUserInfo() {
      this.userInfo = JSON.parse(this.$user.getUserInfo());
    },
    orderNow() {
      let queryForm = {
        userId: this.userInfo.id,
        foodId: this.orderInfo.id,
      };
      this.$login.setPlaceOrder(queryForm).then((res) => {
        if (res && res.code === "00000") {
          Message({
            message: "Successfully submitted order!",
            type: "success",
            duration: 2 * 1000,
          });
          // this.$router.push({
          //   name: "Order",
          //   params: {
          //     orderInfo: JSON.stringify(this.currentData),
          //   },
          // });
        }
      });
    },
  },
};
</script>
    
    <style lang="scss" scoped>
.reg-login-container {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background-color: rgb(244, 222, 185);
  display: flex;
  justify-content: center;
}

.login-body {
  width: 55vw;
  border-right: 0.5px solid #2e0c00;
  border-left: 0.5px solid #2e0c00;
  max-height: 100vh;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}

.login-header {
  flex: 2;
  background-color: #2e0c00;
  padding: 3vh 2vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.header-top {
  display: flex;
  justify-content: space-between;
  color: #b08e4b;
}

.header-top a {
  font-size: 0.9vw;
  cursor: pointer;
}
.top-text {
  font-size: 0.83vw;
}

.login-header a {
  text-decoration: none;
  color: #b08e4b;
}
.header-top > a {
  color: #f3deb9;
}
.login-content {
  border-top: 4px solid #b08e4b;
  flex: 15;
  padding: 2vh 3vw 0 3vw;

  .user-box {
    .user-title {
      font-size: 1vw;
      font-weight: bold;
      color: #5a3819;
      padding: 0.5vh 0.5vw;
      border-bottom: 1px solid #646464;
    }
    .user-form {
      padding: 2vh 1vw;

      .user-item {
        display: flex;
        align-items: center;
        font-size: 0.9vw;
        margin-bottom: 1vh;
        > div:first-child {
          width: 5vw;
          color: #5a3819;
          // margin-right: 2.3vw;
        }

        > div:last-child {
          color: #646464;
        }
      }
    }
  }
}
.login-footer {
  flex: 1;
  padding: 2vh 3vw;
  border-top: 4px solid #b08e4b;
}

#mainlogo1 img {
  width: 10.5vw;
}
.btm-text {
  color: #f3deb9;
  font-size: 1.45vw;
  margin-left: 15px;
}

.header-bottom {
  display: flex;
}

#subLogo img {
  width: 6vw;
}

.foot-body {
  display: flex;
  align-items: center;
}
.foot-web {
  font-size: 0.8vw;
  color: #5a3819;
  margin: 0 5px;
}
.foot-link {
  font-size: 0.7vw;
  color: #b08e4b;
}
.price-box {
  //   padding: 0 3%;

  .price-title {
    text-align: center;
    font-size: 1.2vw;
    font-weight: bolder;
    color: #646464;
  }

  .price-list {
    margin-top: 1.5vh;
    margin-bottom: 3vh;
    color: #646464;

    .price-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid #2e0c00;
      border-bottom: 1px solid #2e0c00;
      border-left: 1px solid #2e0c00;
      padding: 0.5vh 1vw;
      font-size: 0.9vw;
      div {
        flex: 1;
      }
      div:nth-child(2) {
        text-align: center;
      }
      div:nth-child(3) {
        text-align: right;
      }
      div > span {
        font-weight: bold;
        margin: 0 0.3vw;
      }

      .price-name {
        color: #2e0c00;
      }
    }

    .price-includes {
      padding: 0.5vh 1vw;
      font-size: 0.8vw;
      font-weight: bold;
      color: #a98c48;
      border-right: 1px solid #646464;
    }

    .includes-list {
      padding: 1vh 1vw 0 1vw;
      border-bottom: 1px solid #646464;
      border-top: 1px solid #646464;
      border-left: 1px solid #646464;

      .includes-item {
        display: flex;
        align-items: center;
        margin-bottom: 1vh;
        font-size: 0.9vw;

        .item-num {
          background-color: #2e0c00;
          color: #fff;
          width: 1vw;
          height: 1vw;
          border-radius: 25px;
          align-items: center;
          display: flex;
          justify-content: center;
          font-size: 0.7vw;
          font-weight: bolder;
          margin-right: 0.5vw;
        }
        .item-title {
          flex: 3;
        }
        .item-price {
          flex: 1;
          text-decoration: line-through;
        }
        .item-price-person {
          flex: 4;

          > span {
            font-weight: bold;
          }
        }
        .free {
          flex: 2;
        }
      }
    }
    .price-tips {
      font-size: 0.8vw;
      padding: 0.5vh 1vw;
      border-bottom: 1px solid #646464;
      border-right: 1px solid #646464;
      display: flex;
      align-items: center;
      justify-content: space-between;

      div > img {
        width: 1vw;
        height: 1vw;
        margin-right: 0.2vw;
      }
      .selected-btn > button {
        background: linear-gradient(to bottom, #dcbe6e 5%, #aa8c46 100%);
        font-size: 0.7vw;
        color: #fff;
        padding: 0.5vh 2.5vw;
        font-weight: bold;
        border-radius: 25px;
        cursor: pointer;
        user-select: none;
        border: none;
      }

      .selected-btn > img {
        width: 7.1vw;
        height: 2.5vh;
      }
    }
  }
}
.re-btn {
  display: flex;
  justify-content: space-around;
  align-items: center;
  > div {
    background: linear-gradient(to bottom, #dcbe6e 5%, #aa8c46 100%);
    font-size: 0.7vw;
    color: #fff;
    padding: 0.5vh 2.5vw;
    font-weight: bold;
    border-radius: 25px;
    cursor: pointer;
    user-select: none;
  }
  > div:active {
    background: linear-gradient(to bottom, #fff 5%, #fff 100%);
    color: #dcbe6e;
  }
}
</style>